﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>云科技</title>
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
    </head>
    <body>
        <!--Logo区域开始-->
        <div id="header">
            <img src="../images/logo.png" alt="logo" class="left"/>
            <a href="/logout">[退出]</a>
        </div>
        <!--Logo区域结束-->
        <!--导航区域开始-->
        <div id="navi">
            <ul id="menu">
                <li><a href="/index" class="index_on"></a></li>
                <li><a href="/rolelist" class="role_off"></a></li>
                <li><a href="/adminList" class="admin_off"></a></li>
                <li><a href="/feelist" class="fee_off"></a></li>
                <li><a href="/accountlist" class="account_off"></a></li>
                <li><a href="/servicelist" class="service_off"></a></li>
                <li><a href="/billList" class="bill_off"></a></li>
                <li><a href="/reportList" class="report_off"></a></li>
                <li><a href="/userInfo" class="information_off"></a></li>
                <li><a href="/userModiPwd" class="password_off"></a></li>
            </ul>
        </div>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main">  
            <!--保存成功或者失败的提示消息-->          
            <div id="save_result_info" class="save_fail">保存失败，旧密码错误！</div>
            <form class="main_form">
                    <!--必填项-->
                    <div class="text_info clearfix"><span>账务账号ID：</span></div>
                    <div class="input_info">
                        <input type="text" readonly class="readonly" id="id"/>
                    </div>
                    <div class="text_info clearfix"><span>姓名：</span></div>
                    <div class="input_info">
                        <input type="text" id="name"/>
                        <span class="required">*</span>
                        <div class="validate_msg_long error_msg">20长度以内的汉字、字母和数字的组合</div>
                    </div>
                    <div class="text_info clearfix"><span>身份证：</span></div>
                    <div class="input_info">
                        <input type="text" readonly class="readonly" id="idcard"/>
                    </div>
                    <div class="text_info clearfix"><span>登录账号：</span></div>
                    <div class="input_info">
                        <input type="text" value="user1" readonly class="readonly" id="loginname"/>
                        <!--                
                        <div class="change_pwd">
                            <input id="chkModiPwd" type="checkbox" onclick="showPwd(this);" />
                            <label for="chkModiPwd">修改密码</label>
                        </div>
                        -->
                    </div>

                    <div class="text_info clearfix"><span>电话：</span></div>
                    <div class="input_info">
                        <input type="text" class="width200" id="tel"/>
                        <span class="required">*</span>
                        <div class="validate_msg_medium error_msg" style="display: none">正确的电话号码格式：手机或固话</div>
                    </div>
                    <div class="text_info clearfix"><span>生日：</span></div>
                    <div class="input_info">
                        <input type="text" value="由身份证号计算而来" readonly class="readonly" id="birthdate"/>
                    </div>
                    <div class="text_info clearfix"><span>Email：</span></div>
                    <div class="input_info">
                        <input type="text" class="width200" id="email"/>
                        <div class="validate_msg_medium">50长度以内，合法的 Email 格式</div>
                    </div>
                    <div class="text_info clearfix"><span>性别：</span></div>
                    <div class="input_info fee_type">
                        <input type="radio" name="radSex" id="female" value="1" onclick="feeTypeChange('1');" />
                        <label for="female">女</label>
                        <input type="radio" name="radSex" id="male" value="0" onclick="feeTypeChange('0');" />
                        <label for="male">男</label>
                    </div>
                    <div class="text_info clearfix"><span>邮编：</span></div>
                    <div class="input_info">
                        <input type="text" id="zipcode"/>
                        <div class="validate_msg_long">6位数字</div>
                    </div> 
                    <div class="text_info clearfix"><span>QQ：</span></div>
                    <div class="input_info">
                        <input type="text" id="qq"/>
                        <div class="validate_msg_long">5到13位数字</div>
                    </div>                
                    <!--操作按钮-->
                    <div class="button_info clearfix">
                        <input type="button" value="保存" class="btn_save" onclick="showResult();" />
                        <input type="button" value="取消" class="btn_save" onclick="cancel();"/>
                    </div>
                </form>  
        </div>
        <!--主要区域结束-->
        <div id="footer">
            <span>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span>
            <br />
            <span>版权所有(C)云科技有限公司 </span>
        </div>
    <script src="../../js/jquery-3.2.1.js"></script>
    <script src="../../js/GetQueryString.js"></script>
    <script>
        var accountId=GetQueryString('accountId');
        function cancel() {
            if(confirm("修改尚未保存，是否取消")){
                window.location.href="/accountlist";
            }
        }
        function feeTypeChange(gender){
            if(gender=='0'){
                $("#male").prop('checked', 'checked');
            }else if(gender=='1'){
                $("#female").prop('checked', 'checked');
            }
        }
        $.ajax({
            url:"/findAccountById",
            type:"post",
            data:{
                accountId:accountId
            },
            success:function (data) {
                //console.log(data);
                for (var i in data){
                    var account=data[i];
                    var idcardNo=account.idcardNo;
                    var loginName=account.loginName;
                    var birthdate=idcardNo.substring(6,14);
                    var gender=account.gender;
                    feeTypeChange(gender);
                    $("#id").val(''+accountId+'');
                    $("#idcard").val(''+idcardNo+'');
                    $("#loginname").val(''+loginName+'');
                    $("#birthdate").val(''+birthdate+'');
                }
            }
        });
        //保存成功的提示信息
        function showResult() {
            var istf=$("input[name='radSex']:checked").val();
            var realName=$("#name").val();
            var telephone=$("#tel").val();
            var email=$("#email").val();
            var gender=istf;
            var zipcode=$("#zipcode").val();
            var qq=$("#qq").val();
            console.log(realName+telephone+email+gender+zipcode+qq);
            $.ajax({
                url:"/accountUpdate",
                type:"post",
                data:{
                    realName:realName,
                    telephone:telephone,
                    email:email,
                    gender:gender,
                    zipcode:zipcode,
                    qq:qq,
                    accountId:accountId
                },
                success:function () {
                    window.location.href="/accountlist";
                },
                error:function () {
                    showResultDiv(true);
                    window.setTimeout("showResultDiv(false);", 3000);
                }
            });
        }
        function showResultDiv(flag) {
            var divResult = document.getElementById("save_result_info");
            if (flag)
                divResult.style.display = "block";
            else
                divResult.style.display = "none";
        }
    </script>
    </body>
</html>
